<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>50bus-动画渲染</title>
    <meta name="keywords" content="50bus" />
    <meta name="copyright" content="50bus.cn" />
    <!-- <meta http-equiv="mobile-agent" content="http://www.50bus.cn/" />
    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" /> -->
    <link rel="icon" href="/resources/img/favicon.ico" type="image/x-icon" />
    
    <link rel="stylesheet" type="text/css" href="/resources/css/base.css" media="all" />
    <link rel="stylesheet" type="text/css" href="/resources/css/globe.css" media="all" />
    <link rel="stylesheet" type="text/css" href="/resources/css/module-render.css" media="all" />
    <script type="text/javascript" src="/resources/js/jquery-1.9.1.min.js"></script>
</head>

<body>
    <div class="header_wrap">
        <div class="header clearfix">
            <div class="fm980 fl clearfix">
                <a href="index.html" class="logo fl"></a>
                <ul class="nav_box fl">
                    <li><a href="/creative_list.html">形象创意</a></li>
                    <li><a href="/script_list.html">剧本创作</a></li>
                    <li><a href="/render_index.html"  class="cur">动画渲染</a></li>
                    <li><a href="/creative_helper.html">创意助手</a></li>
                </ul>
                <div class="about_box fr">
                    <a href="/about.html">关于我们</a>
                    <#if uid??&&uid!="">
	                    <a href="/user/user_work.html">个人空间</a>
	                    <a href="/logout.html">退出</a>
                    <#else>
	                    <a href="/register.html">注册</a>
	                    <a href="/login.html">登录</a>
                    </#if>
                </div>
            </div>
        </div>

    </div>

    <div class="body_wrap">
        <div class="handle_bar">
            <div class="fm980">
                <p class="render_sub_nav fz16">
                    <a class="" href="http://render.50bus.cn:12345/#/render/projects/">项目管理</a>
                    <a class="" href="http://render.50bus.cn:12345/#/render/scenes/new">新建任务</a>
                    <a class="" href="http://render.50bus.cn:12345/#/render/scenes/">任务管理</a>
                    <a class="" href="http://render.50bus.cn:12345/#/account">账户中心</a>
                    <a class="" href="http://render.50bus.cn:12345/#/help">渲染须知</a>
                </p>
            </div>
        </div>
        <div class="box_bd">
            <div class="banner_box">
                   <p style="background:url(${renderBannerModel.img}) center no-repeat;"></p>
            </div>
            <div class="render_list_box fm980">
                <ul class="render_list">
                 <#assign index=0>
                  <#list renderProviderList as renderProvider>
                   <#assign index=index+1>  
                    <li class="render_item clearfix">
                        <div class="md_img fl">
                            <a href="/render_provider_detail.html?rpid=${renderProvider.rpid}"><p class="comp_img_box"><img style="width:164px;height:112px;" src="${renderProvider.logo}" /></p></a>
                            <p class="btn_box">
                                <a href="javascript:;" id="cancel" style="display:none;" class="btn_oper_purple btn_oper_cancel" data-rpid="${renderProvider.rpid}"><b class="icon">-</b>取消</a>
                                <a href="javascript:;" id="compare" class="btn_oper_purple btn_oper_purple_compare" data-rpid="${renderProvider.rpid}" data-img="${renderProvider.logo}" data-comp="${renderProvider.comp}">
                                	<b class="icon">+</b>对比
                                </a>
                            </p>
                        </div>
                        <div class="md_info fl">
                            <a href="/render_provider_detail.html?rpid=${renderProvider.rpid}"><p class="fz18">公司：${renderProvider.comp}</p></a>
                            <ul class="comp_desc">
                                <li class="clearfix">
                                    <span class="label1 fl">集群名称：${renderProvider.colony}</span> 
                                    <span class="label2 fl">性能：<b class="piece red_piece">${renderProvider.performance}</b></span> 
                                </li>
                                <li class="clearfix">
                                    <span class="label1 fl">单价：${renderProvider.unit_price}（元/核/小时）</span> 
                                    <span class="label2 fl">繁忙程度：<b class="piece orange_piece">${renderProvider.busy}</b></span>
                                </li>
                                <li class="clearfix">
                                    <span class="label1 fl">计算能力：${renderProvider.computer_power}（总核数）</span> 
                                    <span class="label2 fl">
                                        地点：${renderProvider.locale}
                                        <a href="/render_provider_detail.html?rpid=${renderProvider.rpid}" class="purple_txt u_line ml10">了解更多</a>
                                    </span>
                                </li>
                            </ul>
                            <p class="comp_phone">联系电话：${renderProvider.tele}</p>
                        </div>
                        <div class="md_btn fr">
                            <a href="${renderProvider.service_url}" class="btn_com_red">选择此云服务</a>
                        </div>
                    </li>
                  </#list>  
                </ul>

            </div>
        </div>



    </div>

    <div class="footer">
        <div class="fm980 clearfix">
            <div class="foot_link foot_link1 fl">
                <a href="/creative_list.html">形象创意</a>
                <a href="/script_list.html">剧本创作</a>
                <a href="/render_index.html">动画渲染</a>
                <a href="/creative_helper.html" >创意助手</a>
            </div>
            <div class="foot_link foot_link2 fl">
                <a href="http://zjusp.zju.edu.cn/">浙大科技园</a>
                <a href="http://www.zju.edu.cn/">浙江大学</a>
                <a href="/about.html" >关于我们</a>
            </div>
            <div class="copy_box fr">
                <img class="mb5" src="/resources/img/foot_text.png" />
                <p>&copy; 2013-2016 All right reserved</p>
                <p><a href="">服务条款</a><a href="">隐私条款</a><a href="">法律条款</a></p>
                <p style="display:none;"><a href="" class="share_icon share_sina"></a><a href="" class="share_icon share_wx"></a></p>
            </div>
        </div>
    </div>

    <!-- 右侧浮动比较栏 -->
    <div class="float_bar" style="display:none;">
        <ul>
        </ul>
        <p class="btn_box">
            <a href="javascript:;" class="btn_oper_gray">清空</a>
            <a id="submit_compare" href="" class="btn_oper_purple">对比</a>
        </p>
    </div>
    
    
<script type="text/javascript" src="/resources/js/page-creative-list.js"></script>


<script type="text/javascript">
	//对比
	$(".btn_oper_purple_compare").click(function(){
		var size =$(".float_bar ul li").size();
		if(size<3){
			$(this).hide();
			$(this).prev().show();
			$(".float_bar").show()
			addProvider($(this).attr("data-rpid"),$(this).attr("data-img"),$(this).attr("data-comp"));
		}
		else{
			alert("最多只能选择3项进行对比!");
		}
	});
	//取消
	$(".btn_oper_cancel").click(function(){
		$(this).hide();
		$(this).next().show();
		cancelProvider($(this).attr("data-rpid"));
	});
	//清空
	$(".btn_oper_gray").click(function(){
		$(this).parents(".float_bar").hide().children("ul").empty();
		//
		$(".btn_oper_cancel").hide();
		$(".btn_oper_purple_compare").show();
	});
	//对比项悬停效果
	$(".float_bar ul").on("mouseenter","li",function(){
		    $(".float_bar li").each(function(index){
		    	$(this).removeClass("cur").children("a").hide();
	    	});
	    	$(this).addClass("cur").children("a").show();
	}).on("mouseleave","li",function(){
		   $(this).removeClass("cur").children("a").hide();
	});
	//开始对比
	$("#submit_compare").click(function(e){
		e.preventDefault();
		var rpid=[];
		var size =$(".float_bar ul li").size();
		if(size>1){
			$(".float_bar li").each(function(index){
				rpid.push($(this).attr("data-provider"));
			});
			location.href="render_compare.html?rpids="+rpid.join(",");
		}
		else{
			alert("请选择至少2个对比项!");
		}
	});
	//加入一个对比
	function addProvider(id,img,comp){
		$(".float_bar>ul").prepend("<li class='cur' data-provider='"+id+"'><a class='close' href='javascript:cancelProvider("+id+");'>X</a><p class='comp_p'><img src='"+img+"' width='162px' height='110'  /></p><p class='comp_n'>"+comp+"</p></li>")
		//
		$(".float_bar li").each(function(index){
			if(index>0){
				$(this).removeClass("cur").children("a").hide();
			}
		});
	}
	//取消一个对比
	function cancelProvider(id){
		$("li[data-provider='"+id+"']").remove();
		//
		$("a[id='cancel'][data-rpid='"+id+"']").hide();
		$("a[id='compare'][data-rpid='"+id+"']").show();
		//
		var size =$(".float_bar ul li").size();
		if(size<1){
			$(".float_bar").hide();
		}
		
	}
	//个人空间
	<#if uid??&&uid!="">
    	$.post("/common/getUserName.json",{"uid":${uid}},function(data){
    		if(data.name){
    			$('a[href="/user/user_work.html"]').html(data.name+"个人空间");
    		}
    	});
	 </#if>
</script>
</body>
</html>